<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>用户登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<include file="Common:head"/>
<style type="text/css">
*{margin:0;}
img{max-width:100%;}
#code{width:100%;background:#009ce5;color:#fff;cursor:pointer;}

.bg_login{background:url(img/bg.jpg) center center no-repeat;background-size:cover;background-position:center right;}
.login_box{position:absolute;left:50%;top:50%;margin-top:-240px;}
.login_box >img{margin-bottom:30px;}
.login_box form{width:500px;height:340px;background:rgba(0,0,0,0.3);border:1px solid #fff;border-radius:10px;box-sizing:border-box;}
.login_box h5{font-size:20px;font-weight:normal;text-align:center;padding:30px 0;color:#fff;}
.login_box h5 a{color:#fff;text-decoration:none;cursor:pointer;opacity:0.3;}
.login_box h5 a.active{border-bottom:1px solid #fff;padding-bottom:5px;opacity:1;}
.login_box .input{width:400px;height:50px;background:#fff;margin:0 auto 20px auto;border-radius:5px;overflow:hidden;}
.login_box .input *{float:left;font-size:18px;color:#2d3b4d;}
.login_box .input .username{display:inline-block;width:110px;height:100%;background:url(img/user.png) center no-repeat;}
.login_box .input .password{display:inline-block;width:110px;height:100%;background:url(img/pass.png) center no-repeat;}
.login_box .input input{display:inline-block;width:290px;height:100%;border:none;padding:0;box-shadow:none;}
.login_box .input input#username{ -webkit-box-shadow:0 0 0px 1000px white inset;box-shadow:0 0 0px 1000px white inset;}


@media (max-width: 768px){
.login_box{width:100%;padding-left:20px;padding-right:20px;box-sizing:border-box;padding-top:60px;margin-top:-260px;left:0;}
.login_box h5{font-size:18px;padding:15px 0 25px 0;}
.login_box form{width:auto;height:auto;;padding-bottom:10px;}
.login_box .input{width:auto;margin-left:15px;margin-right:15px;}
.login_box .input .username,.login_box .input .password{width:90px;}
.login_box .input input{width:calc( 100% - 90px );}
}
input[type="submit"]{ -webkit-appearance: none;}
</style>
</head>
<body class="bg_login">

<div class="login_box" title="用户登录">
	<img src="img/login_title.png"/>
	<form id='form' method="post" onsubmit="return login();" >
            <h5><a class="active" id="userlogin">用 户 登 录</a>　　|　　<a id="adminlogin">管 理 登 录</a></h5>
		<div class="input">
			<label class="username" for="username"></label><input type="text" name="username" id="username" value=""/>  
		</div>
		<div class="input">
			<label class="password" for="password"></label><input type="password" name="password" id="password" value="" />  
		</div>
		<div class="input" style="margin-top:40px;">
	        <input type="submit" name="提交" value="确认" id="code" size="4"/>
	   </div>
	</form>
</div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("body").css("height",$(window).height() + "px")
/*切换登录*/
	$('.login_box h5 a').on('click',function(){
		$('.login_box h5 a').removeClass('active');
		$(this).addClass('active');
		console.log($(this).index())
	})
	
	$('input:text:first').focus();
	$('form').keyup(function(event){
		if(event.keyCode ==13){
                    login();
		}
	});
})
var changeCode = function(){
	var that = document.getElementById('code_img');
	that.src = that.src + '&' + Math.random();
}
var login = function(){
	if(!$('#username').val()){
		$.messager.alert('提示信息', '请填写用户名', 'error');
		return false;
	}
	if(!$('#password').val()){
		$.messager.alert('提示信息', '请填写密码', 'error');
		return false;
	}
	if(!$('#code').val()){
		$.messager.alert('提示信息', '请填写验证码', 'error');
		return false;
	}
        if($('#userlogin').hasClass('active') == true){
	$.post('index.php?m=user&c=Login&a=login', $("form").serialize(), function(data){
		if(!data.status){
			$.messager.alert('提示信息', data.info, 'error');
			changeCode();
		}else{
			$.messager.progress({text:'加载中，请稍候...'});
			window.location.href = data.url;
		}
	},'json');
        }else{
           	$.post('index.php?m=Admin&c=Index&a=login&dosubmit=1', $("form").serialize(), function(data){
		if(!data.status){
			$.messager.alert('提示信息', data.info, 'error');
			changeCode();
		}else{
			$.messager.progress({text:'加载中，请稍候...'});
			window.location.href = data.url;
		}
	},'json'); 
        }
	return false;
}
</script>
</body>
</html>